<template>
    <div class="top">
        <div class="left">
            <el-icon :size="16">
                <Search />
            </el-icon>
            <span>筛选搜索</span>
            <div class="inputs">
                <div class="inputitem">
                    <span>输入搜索:</span>
                    <el-input placeholder="订单编号" class="input"></el-input>
                </div>
                <div class="inputitem2">
                    <div class="shr">
                        <span>收货人:</span>
                    </div>
                    <el-input placeholder="收货人姓名/手机号码" class="input"></el-input>
                </div>
                <div class="inputitem">
                    <span>提交时间:</span>
                    <el-input placeholder="请选择时间" class="input"></el-input>
                </div>
                <div class="inputitem">
                    <span>订单状态:</span>
                    <el-input placeholder="全部" class="input"></el-input>
                </div>
                <div class="inputitem">
                    <span>订单分类:</span>
                    <el-input placeholder="全部" class="input"></el-input>
                </div>
                <div class="inputitem">
                    <span>订单来源:</span>
                    <el-input placeholder="全部" class="input"></el-input>
                </div>
            </div>

        </div>
    </div>
    <!-- 数据列表 -->
    <div class="center">
        <div class="left">
            <el-icon>
                <Memo />
            </el-icon>
            <span>数据列表</span>
        </div>
    </div>
    <div class="bottom">
        <el-table :data="tableData" style="width: 100%" :border="true">
            <el-table-column type="selection" width="60" />
            <el-table-column label="编号" width="80">
                <!-- <div>{{ }}</div> -->
            </el-table-column>
            <el-table-column label="订单编号" width="180">
            </el-table-column>
            <el-table-column label="提交时间" width="180">
            </el-table-column>
            <el-table-column label="用户账号" width="80">
            </el-table-column>

            <el-table-column label="订单金额" width="120" flex="right">
            </el-table-column>
            <el-table-column label="支付方式" width="120" flex="right">

            </el-table-column>
            <el-table-column label="订单来源" width="120" flex="right">
            </el-table-column>
            <el-table-column label="订单状态" width="200" flex="right"></el-table-column>

            <el-table-column label="操作" width="280" flex="right"></el-table-column>

        </el-table>
    </div>
    <div class="bottombottom">
        <div class="inputbutton">
            <el-select placeholder="批量操作" style="width: 215px">
                <el-option label="显示品牌" value="1" />
                <el-option label="隐藏品牌" value="2" />
            </el-select>
            <el-button type="primary">确定</el-button>
        </div>
        <!-- 分页器 -->
        <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
            :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import *as api from '../../request/api'
import useTable from '../../hooks/useTables'
let { tableData, getTableData, pagination, handleSizeChange, handleCurrentChange } = useTable(api.admin.orderQQ, {
    // keyword: txtvalue.value  // 可以删掉 name.value 不是一个响应式数据
    // name 是响应式的
})
let currentPage2 = ref(1)
let pageSize2 = ref(1)
</script>

<style scoped lang="scss">
.inputs {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;

    .inputitem {
        margin-left: 50px;
        margin-bottom: 20px;

        span {
            font-size: 14px;
            color: #606266;
            box-sizing: border-box;
        }

        .input {
            width: 200px;
            height: 30px;
            transform: translateX(15px);
        }
    }

    .inputitem2 {
        margin-left: 50px;
        display: flex;

        // align-items: center;
        .shr {
            transform: translate(15px, 5px);

            span {
                font-size: 14px;
                color: #606266;
                box-sizing: border-box;

            }
        }


        .input {
            width: 200px;
            height: 30px;
            transform: translateX(28px);

        }

        // margin-bottom: 20px;
    }
}

.bottombottom {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .inputbutton {
        display: flex;

    }

    .el-button {
        transform: translateX(15px);
    }
}
</style>